const canvas = document.getElementById('oscilloscope');
const ctx = canvas.getContext('2d');

// 设置 canvas 大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 边距
const margin = 50;

// 网格初始参数
let gridSize = 50; // 每个小格子的大小
let scale = 1; // 缩放比例
let offsetX = 0; // X 轴偏移量
let offsetY = 0; // Y 轴偏移量

// 绘制网格
function drawGrid() {
  const width = canvas.width - 2 * margin;
  const height = canvas.height - 2 * margin;

  ctx.strokeStyle = '#ccc';
  ctx.lineWidth = 1;

  // 计算缩放后的网格大小
  const scaledGridSize = gridSize * scale;

  // 绘制垂直网格线
  for (let x = margin + offsetX % scaledGridSize; x <= canvas.width - margin; x += scaledGridSize) {
    ctx.beginPath();
    ctx.moveTo(x, margin);
    ctx.lineTo(x, canvas.height - margin);
    ctx.stroke();
  }

  // 绘制水平网格线
  for (let y = margin + offsetY % scaledGridSize; y <= canvas.height - margin; y += scaledGridSize) {
    ctx.beginPath();
    ctx.moveTo(margin, y);
    ctx.lineTo(canvas.width - margin, y);
    ctx.stroke();
  }

  // 绘制大格子的虚线
  ctx.strokeStyle = '#999';
  ctx.lineWidth = 1;
  ctx.setLineDash([5, 5]);

  // 绘制垂直大网格线
  for (let x = margin + offsetX % (scaledGridSize * 5); x <= canvas.width - margin; x += scaledGridSize * 5) {
    ctx.beginPath();
    ctx.moveTo(x, margin);
    ctx.lineTo(x, canvas.height - margin);
    ctx.stroke();
  }

  // 绘制水平大网格线
  for (let y = margin + offsetY % (scaledGridSize * 5); y <= canvas.height - margin; y += scaledGridSize * 5) {
    ctx.beginPath();
    ctx.moveTo(margin, y);
    ctx.lineTo(canvas.width - margin, y);
    ctx.stroke();
  }

  ctx.setLineDash([]); // 重置虚线样式
}

// 绘制坐标轴
function drawAxes() {
  const width = canvas.width - 2 * margin;
  const height = canvas.height - 2 * margin;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;

  // 绘制X轴
  ctx.beginPath();
  ctx.moveTo(margin, canvas.height / 2 + offsetY);
  ctx.lineTo(canvas.width - margin, canvas.height / 2 + offsetY);
  ctx.stroke();

  // 绘制Y轴
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2 + offsetX, margin);
  ctx.lineTo(canvas.width / 2 + offsetX, canvas.height - margin);
  ctx.stroke();
}

// 绘制刻度
function drawTicks() {
  const width = canvas.width - 2 * margin;
  const height = canvas.height - 2 * margin;
  const scaledGridSize = gridSize * scale;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;

  // 绘制X轴刻度
  for (let x = margin + offsetX % scaledGridSize; x <= canvas.width - margin; x += scaledGridSize) {
    ctx.beginPath();
    ctx.moveTo(x, canvas.height / 2 + offsetY - 5);
    ctx.lineTo(x, canvas.height / 2 + offsetY + 5);
    ctx.stroke();
  }

  // 绘制Y轴刻度
  for (let y = margin + offsetY % scaledGridSize; y <= canvas.height - margin; y += scaledGridSize) {
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2 + offsetX - 5, y);
    ctx.lineTo(canvas.width / 2 + offsetX + 5, y);
    ctx.stroke();
  }
}

// 绘制四条边
function drawBorders() {
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;

  // 上边
  ctx.beginPath();
  ctx.moveTo(margin, margin);
  ctx.lineTo(canvas.width - margin, margin);
  ctx.stroke();

  // 下边
  ctx.beginPath();
  ctx.moveTo(margin, canvas.height - margin);
  ctx.lineTo(canvas.width - margin, canvas.height - margin);
  ctx.stroke();

  // 左边
  ctx.beginPath();
  ctx.moveTo(margin, margin);
  ctx.lineTo(margin, canvas.height - margin);
  ctx.stroke();

  // 右边
  ctx.beginPath();
  ctx.moveTo(canvas.width - margin, margin);
  ctx.lineTo(canvas.width - margin, canvas.height - margin);
  ctx.stroke();
}

// 绘制示波器图表
function drawOscilloscope() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  drawGrid();
  drawAxes();
  drawTicks();
  drawBorders();
}

// 初始化绘制
drawOscilloscope();

// 监听滚轮事件，实现缩放
canvas.addEventListener('wheel', (event) => {
  event.preventDefault();

  const delta = event.deltaY;
  const zoomFactor = 0.1;

  if (delta < 0) {
    // 放大
    scale *= 1 + zoomFactor;
  } else {
    // 缩小
    scale *= 1 - zoomFactor;
  }

  // 限制缩放范围
  scale = Math.max(0.1, Math.min(scale, 10));

  drawOscilloscope();
});

// 监听鼠标拖拽事件，实现平移
let isDragging = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (event) => {
  isDragging = true;
  lastX = event.clientX;
  lastY = event.clientY;
});

canvas.addEventListener('mousemove', (event) => {
  if (isDragging) {
    const deltaX = event.clientX - lastX;
    const deltaY = event.clientY - lastY;

    offsetX += deltaX;
    offsetY += deltaY;

    lastX = event.clientX;
    lastY = event.clientY;

    drawOscilloscope();
  }
});

canvas.addEventListener('mouseup', () => {
  isDragging = false;
});

canvas.addEventListener('mouseleave', () => {
  isDragging = false;
});

// 窗口大小改变时重新绘制
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  drawOscilloscope();
});